* {
    margin: 0;
    padding: 0;

}

.container {
    background-color: #010432;
}


.header {
    opacity: 0.6;
    height: 100vh;
    width: 100%;
    /* background-image: url("robotic2.jpg"); */
    background-image: url("robotic2.jpeg");
    background-position: center;
    background-size: cover;
    padding-left: 5%;
    padding-right: 5%;
    box-sizing: border-box;
    position: relative;
}

.text {
    background-color: transparent;
    width: 90%;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

}

.text h1 {

    font-size: 55px;
    background-color: transparent;

}

.text p {
        text-align: justify;
        text-justify: inter-word;
    background-color: transparent;
    margin: 10px 0 40px;
    font-size: 25px;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    font-weight: 100;
    margin-top: 24px;
    margin-bottom: 0px;
    color: white;
}

@media(max-width: 700px) {
    .text h1 {
        font-size: 35px;
    }

    .text p {
        font-size: 20px;
        width: 60%;
    }
}

.bath {

    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

}

.about-container {
    background: url("uobath.jpeg") no-repeat left;
    background-size: 60%;
    background-color: #010432;
    overflow: hidden;
    padding: 100px 0;
}

.inner {
    width: 50%;
    float: right;
    background-color: #DFDFDF;
    padding: 100px;

}

.inner h1 {
    background-color: #DFDFDF;
    margin-bottom: 30px;
    font-size: 30px;
    font-weight: 900;
}

.text2 {
    background-color: #DFDFDF;
    font-size: 15px;
    color: #545454;
    line-height: 30px;
    text-align: justify;
    margin-bottom: 40px;
}

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    padding: 10px 20px;
    height: 100%;
    width: 100%;
    border: none;
    outline: none;
    border-radius: 4px;
    background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
    color: #fff;
}

.btn:hover {
    background: #4837ff;
    transition: all 0.3s ease;
}

@media screen and (max-width:1200px) {
    .inner {
        padding: 80px;
    }
}

@media screen and (max-width:1000px) {
    .inner {
        width: 100%;
    }

    .about-container {
        background-size: 100%;
        padding: 100px 40px;
    }
}





.MATEROV {

    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

}

.about-MATEROV {
    background: url("materov.png") no-repeat left;
    background-position-y: 50px;
    background-size: 60%;
    background-color: #010432;
    overflow: hidden;
    padding: 100px 0;
}

.inner-MATEROV {
    width: 45%;

    float: right;
    background-color: #DFDFDF;
    padding: 40px;

}

.inner-MATEROV h1 {
    background-color: #DFDFDF;
    margin-bottom: 30px;
    font-size: 30px;
    font-weight: 900;
}

.text3 {
    font-size: 15px;
    background-color: #DFDFDF;
    color: #545454;
    line-height: 30px;
    text-align: justify;
    margin-bottom: 40px;
}

.btn2 {

    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    padding: 10px 20px;
    height: 100%;
    width: 100%;
    border: none;
    outline: none;
    border-radius: 4px;
    background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
    color: #fff;    
}

.btn2:hover {
    background: #4837ff;
    transition: all 0.3s ease;

}

@media screen and (max-width:1200px) {
    .inner-MATEROV {
        padding: 80px;
    }
}

@media screen and (max-width:1000px) {
    .inner-MATEROV {
        width: 100%;
    }

    .about-MATEROV {
        background-size: 100%;
        padding: 100px 40px;
    }
}

.robot {
    text-align: right;
}

.robotic_arm {

    margin-left: auto;
    padding: 20em;
    margin-right: 0;
    background-image: url("robotic_arm.png");
    background-repeat: no-repeat;
    background-size: 900px 900px;
    background-position: 700px;
    align-items: right;
    padding-left: 5%;
    padding-right: 5%;
}

.robotic_tweet {
    max-width: 600px;
    align-items:200px;   
    position: relative;
    right: -450px;
    bottom: -120px;
}

@media screen and (max-width:1000px) {
    .robotic_tweet {
        align-items: center;
        right: 0px;
    }

}